<div class="other-line">
	<div class="line"></div>
	<div class="label">or continue with</div>
	<div class="line"></div>
</div>
<div class="other-wrap">
	<button id="googleLogin" class="other-item">
		<img src="${request.contextPath}/static/img/Google.png" alt="google login">
	</button>
	<button id="facebookLogin" class="other-item" onclick="loginFaceBook()">
		<img src="${request.contextPath}/static/img/login_Facebook.png" alt="facebook login">
	</button>
</div>
<script>
    loadGoogleScript()
    loadFacebookScript()
	function loadGoogleScript() {
        const dom = document.createElement('script')
        dom.src = 'https://apis.google.com/js/api:client.js'
        dom.onload = () => {
            initGoogle()
        }
        dom.onerror = () => {
            console.log('Failed to load Google resource, please check the network')
        }
        new Promise(resolve => {
            resolve()
        }).then(() => {
            document.body.appendChild(dom)
        })
	}
	function loadFacebookScript() {
        const dom = document.createElement('script')
        dom.src = 'https://connect.facebook.net/en_US/sdk.js'
        dom.id = 'facebook-jssdk'
        dom.onload = () => {
            this.initFaceBook()
        }
        dom.onerror = () => {
            console.log('Failed to load Google resource, please check the network')
        }
        new Promise(resolve => {
            resolve()
        }).then(() => {
            document.body.appendChild(dom)
        })
	}
	function initGoogle() {
        gapi.load('auth2', () => {
            // Retrieve the singleton for the GoogleAuth library and set up the client.
            this.auth2 = gapi.auth2.init({
                client_id: '64452377724-ok7d4s1fe1a5sojf7bqmtmsi56pmuc5o.apps.googleusercontent.com', // 客户端ID
                // client_id: '', // 客户端ID
                cookiepolicy: 'single_host_origin',
                scope: 'profile' // 可以请求除了默认的'profile' and 'email'之外的数据
            })
            this.attachSignin(document.getElementById('googleLogin'))
        })
	}
	function initFaceBook () {
        FB.init({
            appId: '471555410476624',
            cookie: true,
            xfbml: true,
            version: 'v9.0'
        })
    }
    function loginFaceBook () {
        FB.login((response) => {
            this.getFaceBookUserInfo()
        })
    }
    function getFaceBookUserInfo () {
        FB.api('/me', 'GET', {
            'fields': 'id,name,location,email,first_name,last_name'
        }, (res) => {
            showLoading()
            let data = {
                firstName: res.first_name,
                lastName: res.last_name
            }
            if (res.email) {
                data['email'] = res.email
            } else {
                data['email'] = res.id
            }
            const chl = sessionStorage.getItem('chl')
	        let url = '/v1/fb/login'
	        if(chl) {
                url += '?chl=' + chl
	        }
            _axios.post(url, data).then(resp => {
                if (resp.Code === 200) {
                    window.location.reload()
                } else {
                    showToast(res.Msg)
                    hideLoading()
                }
            })
        })
    }
	function attachSignin(element) {
        let _this = this
        this.auth2.attachClickHandler(element, {},
            (googleUser) => {
                let profile = _this.auth2.currentUser.get().getBasicProfile()
	            showLoading()
                const chl = sessionStorage.getItem('chl')
                let url = '/v1/google/login'
                if(chl) {
                    url += '?chl=' + chl
                }
	            _axios.post(url, {
                    email: profile.getEmail(),
                    firstName: profile.getGivenName(),
                    lastName: profile.getFamilyName(),
                    avatar: profile.getImageUrl()
	            }).then(res => {
                    if (res.Code === 200) {
                       window.location.reload()
                    } else {
                        showToast(res.Msg)
                        hideLoading()
                    }
	            })
            }, (error) => {
                console.log(JSON.stringify(error, undefined, 2))
            })
	}
</script>